<template>
	<el-row class="mb-4">
	   <el-button type="success" @click="handleAdd">添加</el-button>
	 </el-row>
	  <el-table :data="state.banners" stripe style="width: 100%">
	   <el-table-column type="selection" width="55" />
	   <el-table-column prop="title" label="标题" width="180" />
	   <el-table-column prop="url" label="图片" width="180">
		   <template #default="scope">
		      <el-image style="width: 100px; height: 100px" :src="scope.row.url" :fit="fit" />
		   </template>
		   </el-table-column>
	   <el-table-column prop="link" label="链接" width="180" />
	   <el-table-column prop="status" label="状态" width="180" >
		   <template #default="scope">
				<el-tag v-if="scope.row.status == 1" type="success">应用</el-tag>
				<el-tag v-if="scope.row.status == 0">非应用</el-tag>
			</template>
		</el-table-column>
	   <el-table-column fixed="right" label="操作" width="120">
	     <template #default="scope">
	       <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">修改</el-button>
	       <el-button link type="primary" size="small" @click="handleDel(scope.row,scope.$index)">删除</el-button>
	     </template>
	   </el-table-column>
	 </el-table>
	 
	 <el-dialog v-model="visible" :show-close="false">
	   <template #header="{ close, titleId, titleClass }">
	     <div class="my-header">
	       <h4 :id="titleId" :class="titleClass">添加轮播图!</h4>
	       
	     </div>
	   </template>
	     <el-form :model="state.form" label-width="120px">
			 <el-form-item label="标题">
			   <el-input v-model="state.form.title" />
			 </el-form-item>
			  <el-form-item label="图片">
			 		<ImageUpload ref="image" :imageUrl="state.form.url"/>
			 </el-form-item>
			 <el-form-item label="链接">
			   <el-input v-model="state.form.link" />
			 </el-form-item>
			 <el-form-item label="应用">
			   <el-radio-group v-model="state.form.status" class="ml-4">
				 <el-radio :label="0" size="large">不使用</el-radio>
			      <el-radio :label="1" size="large">使用</el-radio>
			     </el-radio-group>
			 </el-form-item>
	          
	         </el-form>
	      <el-form-item>
	       <el-button type="primary" @click="onSubmit">保存</el-button>
	       <el-button type="danger" @click="visible = false">
	         <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
	         Close
	       </el-button>
	     </el-form-item>
	 </el-dialog>
	 <el-dialog v-model="edit_visible" :show-close="false">
	   <template #header="{ close, titleId, titleClass }">
	     <div class="my-header">
	       <h4 :id="titleId" :class="titleClass">修改轮播图!</h4>
	       
	     </div>
	   </template>
	     <el-form :model="state.editFrom" label-width="120px">
	           <el-form-item label="标题">
	             <el-input v-model="state.editFrom.title" />
	           </el-form-item>
	            <el-form-item label="图片">
					<ImageUpload ref="editImage" :imageUrl="state.editFrom.url"/>
	           </el-form-item>
	           <el-form-item label="链接">
	             <el-input v-model="state.editFrom.link" />
	           </el-form-item>
			   <el-form-item label="应用">
			     <el-radio-group v-model="state.editFrom.status" class="ml-4">
					<el-radio :label="0" size="large">不使用</el-radio>
			        <el-radio :label="1" size="large" >使用</el-radio>
			       </el-radio-group>
			   </el-form-item>
	         </el-form>
	      <el-form-item>
	       <el-button type="primary" @click="onSave">更新</el-button>
	       <el-button type="danger" @click="visible = false">
	         <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
	         Close
	       </el-button>
	     </el-form-item>
	 </el-dialog>
</template>

<script setup>
	import { ref,reactive, onMounted } from 'vue'
	import {index,create,edit,del}  from '../../api/banner.js'
	import ImageUpload from '../../components/ImageUpload.vue';
	const state = reactive({
			banners:[],
			form:{},
			editFrom:{}
		}
	);
	const visible =ref(false);
	const edit_visible =ref(false);
	const image = ref(null);
	const editImage = ref(null);
	onMounted(()=>{
		index().then(res=>{
			state.banners = res.data;
		})
	})
	const handleAdd = (item,index)=>{
		visible.value = true;
	}
	const handleEdit=(item,index)=>{
		edit_visible.value = true;
		state.editFrom ={};
		state.editFrom = item;
	}
	const handleDel=(item,index)=>{
		ElMessageBox.confirm('确认删除?','Warning',{
			  confirmButtonText: 'OK',
		      cancelButtonText: 'Cancel',
		      type: 'warning',
		  }).then(res=>{
		  	del({id:item.id}).then(resp=>{
		  		state.banners.splice(index,1);
		  		ElMessage({
		  			type: 'success',
        			message: 'Delete completed',
		  		})
		  	})
		  		
		  });
	}
	const onSave=()=>{
		state.editFrom.url = editImage.value.image;
		edit(state.editFrom).then(res=>{
			
		})
	}
	const onSubmit=()=>{
		state.form.url = image.value.image;
		create(state.form).then(res=>{
			
		})
	}
</script>
	
<style>
</style>